<template>
  <div>
    <!-- 设置默认选中：
             1：node-key对应 选中的字段名
             2：default-checked-keys=[node-key对应字段名的值的项选中],不考虑以前哪些项选中过（以前选中的还是选中），反正你给的值对应 项都选中
          check-strictly：父子是否关联，false:关联  true不关联
          this.$refs.tree.setCheckedKeys([2])：设置选中项，以前选中的全部清空，只选中给了相应值的项
          this.$refs.tree.getCheckedKeys()：获取已选中项
    -->
    <el-tree
      ref="tree"
      :data="list"
      show-checkbox
      node-key="id"
      :default-checked-keys="defaultKeys"
      check-strictly
    />
    <el-button type="primary" @click="submit">确定</el-button>
    <el-button type="primary" @click="setChecked">设置选中广州与深圳</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultKeys: [3],
      list: [
        {
          label: '广东',
          id: 1,
          children: [
            {
              label: '广州',
              id: 2
            },
            {
              label: '深圳',
              id: 3
            }
          ]
        }
      ]
    }
  },
  methods: {
    submit() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setChecked() {
      this.$refs.tree.setCheckedKeys([2, 3])
      // this.defaultKeys = [2]
    }
  }
}
</script>
<style></style>
